iT邦幫忙

2021 iThome 鐵人賽

DAY 21
0
Modern Web

動起來吧!Web Motion 動態特效網頁學習日記系列 第 21

學習筆記:一起進入 PixiJS 的世界 (二)

  • 分享至 

  • xImage
  •  

開始繪圖吧!

有了基礎場景後,就可以開始畫圖了,首先使用new建構出PIXI.Graphics()圖像物件,接下來可以利用drawRect()drawCircle()等繪圖函式,進行圖像繪製。

這邊要注意的是,由drawRect()drawCircle()直接建立出來的原始狀態圖像,是不包含顏色與樣式的,因此,可以先利用beginFill()lineStyle()等函式定義樣式後再繪製圖像。

//建立出一個基礎場景,將建立出來的場景放入網頁中
let app = new PIXI.Application({ width: 640, height: 360 });
document.body.appendChild(app.view);
//建立繪圖物件
let myObj = new PIXI.Graphics();
//先選擇填色
myObj.beginFill(0xff0000);
//在繪圖物件建立四邊形
myObj.drawRect(0, 0, 200, 100);
myObj.endFill();
//將物件放置場景中
app.stage.addChild(myObj);

beginFill()endFill()中間產生物件中,都會以beginFill()定義的顏色做為填色。


上一篇
學習筆記:一起進入 PixiJS 的世界 (一)
下一篇
學習筆記:一起進入 PixiJS 的世界 (三)
系列文
動起來吧!Web Motion 動態特效網頁學習日記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言